<template>
    <div class="Cities">
        <p style="font-size: 14px; font-weight: 700; color: rgba(162, 182, 255, 1);">
            毕业生流向城市
        </p>
    </div>
    <div class="Cities_bottom">
        <div class="Cities_T">
            <div class="Design">
                <img src="../../assets/IconDesign.png" alt="">
                <p style="color: rgba(255, 255, 255, 1); font-size: 14px; margin-right: 10px;">设计</p>
            </div>
            <div class="Development">
                <img src="../../assets/IconDevelopment.png" alt="">
                <p style="color: rgba(255, 255, 255, 1); font-size: 14px; margin-right: 10px;">开发</p>
            </div>
            <div class="Metaverse">
                <img src="../../assets/IconMetaverse.png" alt="">
                <p style="color: rgba(255, 255, 255, 1); font-size: 14px; margin-right: 10px;">元宇宙</p>
            </div>
        </div>
        <div ref="chart" class="Cities_B">

        </div>
    </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted, onBeforeUnmount, ref } from 'vue';

const chart = ref(null);
let myChart = null;

const Cities = () => {
    myChart = echarts.init(chart.value);
    window.addEventListener('resize', function () {
        myChart.resize();
    });
    const option = {
        backgroundColor: '#0B2242', // 背景颜色
        xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01],
            axisLine: { show: false }, // 隐藏X轴线
            axisTick: { show: false }, // 隐藏刻度线
            axisLabel: { show: false }, // 隐藏X轴标签
            splitLine: { show: false }, // 隐藏网格线
        },
        yAxis: {
            type: 'category',
            data: ['天津', '重庆', '江苏', '广东', '浙江', '上海', '北京'], // 城市名称
            axisLine: { show: false }, // 隐藏Y轴线
            axisTick: { show: false }, // 隐藏刻度线
            axisLabel: {
                formatter: function (value, index) {
                    const rank = 7 - index;
                    return `{rank${rank}|${rank}} {city|${value}}`;
                },
                rich: {
                    rank1: { color: '#fff', backgroundColor: '#FF5252', padding: [2, 5], borderRadius: 10 }, // 第一名 样式
                    rank2: { color: '#fff', backgroundColor: '#FFAB00', padding: [2, 5], borderRadius: 10 }, // 第二名 样式
                    rank3: { color: '#fff', backgroundColor: '#00C853', padding: [2, 5], borderRadius: 10 }, // 第三名 样式
                    rank4: { color: '#000', backgroundColor: '#fff', padding: [2, 5], borderRadius: 10 }, // 第四名 样式
                    rank5: { color: '#000', backgroundColor: '#fff', padding: [2, 5], borderRadius: 10 }, // 第五名 样式
                    rank6: { color: '#000', backgroundColor: '#fff', padding: [2, 5], borderRadius: 10 }, // 第六名 样式
                    rank7: { color: '#000', backgroundColor: '#fff', padding: [2, 5], borderRadius: 10 }, // 第七名 样式
                    city: { color: '#fff', padding: [0, 0, 0, 10] }, // 城市名称样式
                },
            },
        },
        series: [
            {
                name: '数据',
                type: 'bar',
                data: [1, 3, 4, 6, 8, 9, 11], // 对应每个城市的数据
                label: {
                    show: true,
                    position: 'right',
                    color: '#fff',
                },
                itemStyle: {
                    borderRadius: [10, 10, 10, 10], // 条形圆角
                    color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                        { offset: 0, color: '#00CCD2' }, // 渐变开始颜色
                        { offset: 1, color: '#00A2FF' }, // 渐变结束颜色
                    ]),
                },
                barWidth: 4, // 条形宽度
            },
        ],
        grid: {
            left: '5%',
            top: '5%',
            right: '5%',
            bottom: '5%',
            containLabel: true, // 包含轴标签
        },
    };

    myChart.setOption(option);
}

onMounted(() => {
    Cities();
})
onBeforeUnmount(() => {
    if (myChart) {
        myChart.dispose();  // 销毁图表实例，清理资源
    }
});
</script>

<style lang="scss" scoped>
.Cities {
    position: fixed;
    right: 80px;
    top: 70px;
    width: 350px;
    height: 30px;
    background-image: url('../../assets/CombinedShape.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    line-height: 30px;

    p {
        margin-left: 14px;
    }
}

.Cities_bottom {
    position: fixed;
    right: 80px;
    top: 110px;
    width: 350px;
    height: 260px;
    background: rgba(12, 29, 95, 1);

    .Cities_T {
        width: 100%;
        height: 80px;
        // background: #189b9d74;
        display: flex;

        .Design {
            width: 100px;
            height: 60px;
            opacity: 1;
            border-radius: 3.2px;
            background: linear-gradient(180deg, #203AFF 0%, #AD00FF 100%);
            margin: auto;
            line-height: 60px;
            display: flex;
            // justify-content: space-around;

            img {
                width: 20px;
                height: 20px;
                margin: auto;
            }
        }

        .Development {
            width: 100px;
            height: 60px;
            opacity: 1;
            border-radius: 3.2px;
            background: linear-gradient(180deg, #203AFF 0%, #AD00FF 100%);
            margin: auto;
            line-height: 60px;
            display: flex;
            // justify-content: space-around;

            img {
                width: 20px;
                height: 20px;
                margin: auto;
            }
        }

        .Metaverse {
            width: 100px;
            height: 60px;
            opacity: 1;
            border-radius: 3.2px;
            background: linear-gradient(180deg, #203AFF 0%, #AD00FF 100%);
            margin: auto;
            line-height: 60px;
            display: flex;
            // justify-content: space-around;

            img {
                width: 20px;
                height: 20px;
                margin: auto;
            }
        }
    }
}

.Cities_B {
    position: fixed;
    right: 80px;
    top: 190px;
    width: 350px;
    height: 180px;
    // background: rgb(95, 102, 131);
}
</style>